<div class="l-segment l-border-0 example-layout">
    <h3>h系列</h3>
    <div class="l-divider"></div>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <h3>自由列布局</h3>
    <textarea name="" id="" rows="6">
        <div class="l-row">
            <div class="l-col">自由列</div>
            <div class="l-col">自由列</div>
            <div class="l-col">自由列</div>
        </div>
    </textarea>
    <div class="l-row">
        <div class="l-col">自由列</div>
        <div class="l-col">自由列</div>
        <div class="l-col">自由列</div>
    </div>

    <h3>自由列+内边距布局</h3>
    <textarea name="" id="" rows="6">
        <div class="l-row-padding">
            <div class="l-col">自由列</div>
            <div class="l-col">自由列</div>
            <div class="l-col">自由列</div>
        </div>
    </textarea>
    <div class="l-row-padding">
        <div class="l-col">自由列</div>
        <div class="l-col">自由列</div>
        <div class="l-col">自由列</div>
    </div>

    <h3>控制列</h3>
    <textarea name="" id="" rows="12">
        <div class="l-row">
            <div class="l-col-4">控制列l-col-4</div>
            <div class="l-col-4">控制列l-col-4</div>
            <div class="l-col-4">控制列l-col-4</div>
        </div>
        <div class="l-row">
            <div class="l-col-1">控制列l-col-1</div>
            <div class="l-col-3">控制列l-col-3</div>
            <div class="l-col-5">控制列l-col-5</div>
        </div>
    </textarea>
    <div class="l-row">
        <div class="l-col-4">控制列l-col-4</div>
        <div class="l-col-4">控制列l-col-4</div>
        <div class="l-col-4">控制列l-col-4</div>
    </div>
    <div class="l-row">
        <div class="l-col-1">控制列l-col-1</div>
        <div class="l-col-3">控制列l-col-3</div>
        <div class="l-col-5">控制列l-col-5</div>
    </div>

    <h3>控制列+边距</h3>
    <textarea name="" id="" rows="12">
        <div class="l-row-padding">
            <div class="l-col-4">控制列l-col-4</div>
            <div class="l-col-4">控制列l-col-4</div>
            <div class="l-col-4">控制列l-col-4</div>
        </div>
        <div class="l-row-padding">
            <div class="l-col-1">控制列l-col-1</div>
            <div class="l-col-3">控制列l-col-3</div>
            <div class="l-col-5">控制列l-col-5</div>
        </div>
    </textarea>
    <div class="l-row-padding">
        <div class="l-col-4">控制列l-col-4</div>
        <div class="l-col-4">控制列l-col-4</div>
        <div class="l-col-4">控制列l-col-4</div>
    </div>
    <div class="l-row-padding">
        <div class="l-col-1">控制列l-col-1</div>
        <div class="l-col-3">控制列l-col-3</div>
        <div class="l-col-5">控制列l-col-5</div>
    </div>

    <h3>列定位</h3>
    <textarea name="" id="" rows="6">
        <div class="l-row">
            <div class="l-col l-l-1">自由列</div>
            <div class="l-col l-l-2">自由列</div>
            <div class="l-col l-l-5">自由列</div>
        </div>
    </textarea>
    <div class="l-row">
        <div class="l-col l-l-1">自由列</div>
        <div class="l-col l-l-2">自由列</div>
        <div class="l-col l-l-5">自由列</div>
    </div>

    <h3>列边距定位</h3>
    <textarea name="" id="" rows="6">
        <div class="l-row">
            <div class="l-col l-ml-1">自由列</div>
            <div class="l-col l-ml-2">自由列</div>
            <div class="l-col l-ml-5">自由列</div>
        </div>
    </textarea>
    <div class="l-row">
        <div class="l-col l-ml-1">自由列</div>
        <div class="l-col l-ml-2">自由列</div>
        <div class="l-col l-ml-5">自由列</div>
    </div>
</div>
</div>